<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .re {
            margin: auto;
            text-align: center;
        }

        .box {
            margin: auto;
            width: 910px;
            height: 60px;
            background-color: rgb(231, 231, 231);
        }

        .box span {
            display: block;
            font-size: 20px;
            padding: 20px 40px;
            color: red;
            line-height: 15px;
            float: left;
            /* margin-left: 15px; */
        }

        .goods {
            width: 900px;
            height: 300px;
            background-color: rgb(247, 237, 249);
            margin: auto;
            margin-top: 25px;
            padding: 0px 10px;
        }

        img {
            width: 120px;
            height: 120px;
        }

        ul li {
            list-style: none;
        }

        .yuan {
            display: block;
            float: left;
        }

        .box2 ul li {
            display: block;
            float: left;
            padding: 0px 10px;
        }

        .ping {
            width: 910px;
            height: 40px;
            background-color: rgb(240, 240, 240);
            margin: auto;
            margin-top: 70px;
            color: red;
            border: 1;
        }

        .che {
            width: 900px;
            height: 400px;
            border: 2px solid balck;
            margin: auto;
            margin-top: 50px;
        }

        .che ul li {
            display: block;
            float: left;
            padding: 0px 10px;
        }
    </style>
</head>

<body>
    <div class="re">
        <h2>热销爆款</h2>
    </div>
    <div class="box">
        <span>空调</span>
        <span>平板电视</span>
        <span>生活电器</span>
        <span>洗衣机</span>
        <span>冰箱</span>
        <span>厨房大电</span>
    </div>
    <div class="box2">
        <ul class="goods">
            <!-- <li >
                <img src="" alt="">
                <p></p>
                <span class="yuan"></span>
                <button>加入购物车</button>
            </li> -->
        </ul>
    </div>
    <div class="box3">
        <h2 class="ping">全部商品</h2><br>
        <ul class="che">
            <!-- <li>
                <img src="" alt="">
                <p></p>
                <span></span>
                <button>-</button>
                <span></span>
                <button>+</button>
                <button>删除</button>
            </li> -->
        </ul>
    </div>
    <script>
        var box = document.querySelector('.box')
        var goods = document.querySelector('.goods')
        var che = document.querySelector('.che')
        // 商品列表得数据
        var goods_list = [
            {
                img: 'https://pic.nximg.cn/file/20230414/34175053_141251871122_2.jpg',
                name: '2025新品美的酷省<br>电Ultra新一级省电2匹<br>3匹立',
                price: '￥6599'
            },
            {
                img: 'https://pic.nximg.cn/file/20200525/4997818_154111282087_2.jpg',
                name: '2025新品美的酷省<br>电Ultra新一级省电2匹<br>3匹立',
                price: '￥6599'
            },
            {
                img: 'https://pic.nximg.cn/file/20210324/12304724_095102092080_2.jpg',
                name: '2025新品美的酷省<br>电Ultra新一级省电2匹<br>3匹立',
                price: '￥6599'
            },
            {
                img: 'https://pic.nximg.cn/file/20210318/29721173_205549611318_2.jpg',
                name: '2025新品美的酷省<br>电Ultra新一级省电2匹<br>3匹立',
                price: '￥6599'
            },
            {
                img: 'https://pic.nximg.cn/file/20180425/12360805_161908882038_2.jpg',
                name: '2025新品美的酷省<br>电Ultra新一级省电2匹<br>3匹立',
                price: '￥6599'
            },

        ]
        // // type切换
        // box_spans.forEach((item, index) => {
        //     item.addEventListener('click',()=> {
        //         box2_spans.forEach(item1 =>{
        //             item1.classList.remove('show')
        //         })
        //         bod_spans[index].classList.add('show')
        //     })
        // })
        // 商品列表渲染
        goods_list.forEach(item => {
            goods.innerHTML += `
            <li>
                <img src="${item.img}" alt="">
                <p>${item.name}</p>
                <span>${item.price}</span><br>
                 <button onclick='add(${item.id})'>加入购物车</button>
            </li>
            `
        })
        // 购物车渲染
        function apply() {
            che.innerHTML = ''
            che_list.forEach(item => {
                che.innerHTML += `
                <li>
                <img src="${item.img}" alt="">
                <p>${item.name}</p>
                <span>${item.price}</span>
                <button onclick='jian(${item.id})'>-</button>
                <span>${item.num}</span>
                <button onclick='jia(${item.id})'>+</button>
                <button onclick= 'del'(${item.id})>删除</button>
            </li>
                `
            })
        }
        // 购物车的数据
        var che_list = []
        // 加入购物车
        function add(id) {
            var good = goods_list.find(item => item.id == id)
            che_list.push({
                img: good.img,
                name: good.name,
                price: good.price,
                num: 1,
                is: false
            })
            console.log(che_list);
            apply()
        }
        // +1
        function jia(id) {
            var a = che_list.findIndex(item => item.id == id)
            che_list[a].num++
            console.log(che_list);
            apply()
        }
        // -1
        function jian(id) {
            var a = che_list.findIndex(item => item.id == id)
            if (che_list[a].num > 1) {
                che_list[a].num--
            }
            apply()
        }
        // 删除
        function del(id) {
            var a = che_list.findIndex(item => item.id == id)
            che_list.splice(a, 1)
            console.log(che_list);

            apply()
        }
    </script>
</body>

</html>